<template>
  <div class="baseNodeContainer">
    <!--    <el-icon :color="nodeData.statusInfo.color">-->
    <!--      <CircleCheck />-->
    <!--    </el-icon>-->
    <span
      v-if="nodeData.nodeInfo.color"
      :style="{
        color: nodeData.nodeInfo.color,
        background: hexToRgba(nodeData.nodeInfo.color, 0.1),
      }"
      class="statusName"
      >{{
        typeof nodeData.nodeInfo.name === "string"
          ? nodeData.nodeInfo.name
          : nodeData.nodeInfo.name?.zh_CN || "--"
      }}</span
    >
    <!--    <el-icon @click="handleMoreClick" size="14" color="#707070">-->
    <!--      <MoreFilled />-->
    <!--    </el-icon>-->
    <el-popover
      v-model:visible="morePop"
      placement="bottom-start"
      :width="200"
      trigger="contextmenu"
      :show-arrow="false"
      popper-class="customPopoverClass"
    >
      <template #reference>
        <span class="moreSpan">
          <el-icon @click="handleMoreClick" size="14" color="#707070">
            <MoreFilled />
          </el-icon>
        </span>
      </template>
      <template #default>
        <div class="nodeMorePopoverClass">
          <ul class="popoverList">
            <li @click="handleSettingNode" class="popoverItem">
              <img src="@/assets/lifecycle/setting.svg" />编辑状态
            </li>
            <li
              style="color: #d54941"
              @click="handleDelNode"
              class="popoverItem"
            >
              <img src="@/assets/lifecycle/delete.svg" />删除状态
            </li>
          </ul>
        </div>
      </template>
    </el-popover>
    <CDialog
      :title="'编辑生命周期状态'"
      v-model="dialogVisible"
      @handleDialogOk="handleEditLifecycleNode"
      :fields="dialogFields"
      :nodeData="lifecycleNodeData"
      append="#root"
    ></CDialog>
  </div>
</template>
<script setup lang="ts">
  import { deepCopy, hexToRgba } from "@/utils/common.ts";
  import { Cell } from "@antv/x6";
  import { inject, onMounted, ref } from "vue";
  import { MoreFilled } from "@element-plus/icons-vue";
  import type { lifecycleBaseNodeDataType } from "@/views/lifecycle/interface";
  import type {
    createLifeCycleParams,
    LifeCycleEntity,
    lifecycleNode,
    LifeGlobalStatus,
    saveLifecycleNodeParams,
  } from "@/interface/lifecycle.ts";
  import CDialog from "@/components/CDialog.vue";
  import {
    type DynamicField,
    mockLifecycleNodeFields,
  } from "@/data/wbsFields.ts";
  import {
    getLifecycleFieldList,
    saveLifeCycleNode,
    updateLifeCycle,
  } from "@/api/lifeCycle.ts";
  import { ElMessage } from "element-plus";
  const getNode = inject("getNode") as () => Cell<Cell.Properties>;
  const update = inject("updateLifecycleData") as () => void;
  const mode = inject("mode") as string;
  // const nodes = inject("nodeList");
  let node: Cell<Cell.Properties>;

  const dialogFields = ref<DynamicField[]>(mockLifecycleNodeFields);

  const nodeData = ref<lifecycleBaseNodeDataType>({
    nodeInfo: {},
    statusInfo: {} as LifeGlobalStatus,
    lifecycleInfo: {} as LifeCycleEntity,
  });
  const lifecycleNodeData = ref<lifecycleNode>({});
  const morePop = ref(false);
  const dialogVisible = ref(false);

  const handleMoreClick = async () => {
    if (mode === "preview") return;
    morePop.value = !morePop.value;

    // console.log("handleMoreClick");
    // morePop.value = !morePop.value;
  };
  const handleDelNode = () => {
    const node = getNode();
    node.model?.removeCell(node);
    console.log("handleDelNode", node.model?.removeCell(node));
  };
  const handleSettingNode = async () => {
    //获取下拉框选项值
    const res = await getLifecycleFieldList();
    // console.log(res.find((item) => item.code === "status"));
    const fieldsList = res.find((item) => item.code === "STATUS")?.values || [];
    dialogFields.value.forEach((item) => {
      if (item.field === "code") {
        item.options = fieldsList.map((item) => {
          return {
            label: item.displayName,
            value: item.code,
          };
        });
      }
    });
    lifecycleNodeData.value = deepCopy(nodeData.value.nodeInfo);
    if (typeof nodeData.value.nodeInfo.name === "object") {
      lifecycleNodeData.value.name = nodeData.value.nodeInfo.name?.zh_CN || "";
    }

    console.log(lifecycleNodeData.value, "nodeData.value");
    dialogVisible.value = true;
  };
  const handleEditLifecycleNode = async (formData: any) => {
    console.log(formData, "formData");
    const params: saveLifecycleNodeParams = {
      id: nodeData.value.lifecycleInfo.id,
      node: { ...formData },
    };
    params.node.name = {
      zh_CN: formData.name,
    };
    const data = await saveLifeCycleNode(params);
    node.setData(
      { ...node.getData(), nodeInfo: data },
      { overwrite: true, deep: true },
    );
    // console.log("nodedata", node.getData(), node.model?.graph.toJSON());
    const lifecycleDetails = node.getData().lifecycleInfo;
    // console.log(lifecycleDetails, "lifecycleDetails 111");
    const updateParams: createLifeCycleParams = {
      id: lifecycleDetails.id,
      layout: JSON.stringify(node.model?.graph.toJSON()),
      name: lifecycleDetails.name,
      remark: lifecycleDetails.remark,
      status: lifecycleDetails.status,
      statusCard: lifecycleDetails.statusCard,
      // model: lifecycleDetails.model,
      type: lifecycleDetails.type,
    };
    await updateLifeCycle(updateParams);
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    update();
    dialogVisible.value = false;
  };
  onMounted(() => {
    node = getNode();
    nodeData.value = node.getData();
    // console.log("nodeData.value", nodeData.value);
    // console.log(node.getData(), "node");
    node.on("change:data", (node) => {
      // console.log("change:node", node);
      nodeData.value = node.cell.getData();
    });
  });
</script>

<style scoped lang="scss">
  .baseNodeContainer {
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
    justify-content: space-between;
    .statusName {
      height: 24px;
      font-size: 13px;
      font-weight: 500;
      color: #2e405e;
      line-height: 24px;
      padding: 0 6px;
      border-radius: 4px;
      background: #e8f1fb;
    }
    .moreSpan {
      background: #fff;
      transition: all 0.2s;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        background: #e2e2e2;
      }
    }
  }

  .nodeMorePopoverClass {
    width: 128px;
    border: 1px solid #f2f2f2;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.16);
    background: #fff;
    .popoverList {
      padding: 0;
      margin: 0;
      list-style: none;
      .popoverItem {
        font-size: 14px;
        color: #2e405e;
        height: 32px;
        border-radius: 4px;
        background: #fff;
        transition: background-color 0.2s;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 9px;
        &:hover {
          background: #f5f6f8;
        }
        img {
          width: 14px;
          height: 14px;
          margin-right: 9px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .customPopoverClass {
    padding: 0 !important;
    width: 120px !important;
    min-width: 120px !important;
  }
</style>
